body {
    padding: 0;
    margin: 0;
    background-color: #000;
}
ul {
    list-style: none;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    padding: 0;
    transform: translate(-50%,-50%);
    width: 600px;
    height: 150px;
}
ul li {
    position: absolute;
    width: 200px;
    height: 200px;
    background: #000;
    margin: -100px;
    transform: rotate(45deg);
    transition: .5S;
    overflow: hidden;
    opacity: 0.8;
}
ul li:hover {
    opacity: 1;
}
ul .item1 {
    top: 0;
    left: 0;
}
ul .item2 {
    bottom: 0;
    left: 25%;
}
ul .item3 {
    top: 0;
    left: 50%;
}
ul .item4 {
    bottom: 0;
    left: 75%;
}
ul .item5 {
    top: 0;
    left: 100%;
}
ul li .bg {
    width: 100%;
    height: 100%;
    transform: rotate(-45deg) scale(1.4);
}
ul .item1 .bg {
    background: url(../images/pig.jpg) no-repeat center center;
    background-size: cover;
}
ul .item2 .bg {
    background: url(../images/2.jpg) no-repeat center;
    background-size: cover;
}
ul .item3 .bg {
    background: url(../images/cat.jpg) no-repeat center;
    background-size: cover;
}
ul .item4 .bg {
    background: url(../images/4.jpg) no-repeat center;
    background-size: cover;
}
ul .item5 .bg {
    background: url(../images/1.png) no-repeat center;
    background-size: cover;
}
